<template>
  <div class="BuyCart">
    <div class="info">
      <span>30天无忧退货</span>
      <span>48个小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    <div class="list">
      <div class="cartItem" v-for="(item,index) in cartList" :key="index">
        <van-checkbox @change="checkEvent($event,item)" v-model="item.checked"></van-checkbox>
        <van-image width="70" height="70" fit="cover" :src="item.list_pic_url" />
        <div class="product">
          <div class="title">
            <span>{{item.goods_name}}</span><span class="num">x{{item.number}}</span>
          </div>
          <p class="brief">{{item.goods_specifition_name_value}}</p>
          <p class="price">{{item.retail_price | filtermoneny}}</p>
          <van-button type="danger" size="small" @click="deletedData(item)">删除</van-button>
        </div>
      </div>
    </div>
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>

    </van-submit-bar>
  </div>
</template>



<script>
  import { mapState} from 'vuex';
  import { GetEventList,GetDeleteList} from '@/request/api'
  let mapStateObj = mapState(['cartTotal', 'cartList'])
  export default {
    data() {
      return {
        checked: true,
        list:[]
      }
    },

    computed: {
      checkedAll: {
        set(val) {
          GetEventList({
            isChecked:Number(val),
            productIds:this.list
          }).then(res => {
            if(res.errno ==0){
               console.log(res)
               this.$store.commit('setCartList',res.data.cartList)
               this.$store.commit('setCartTotal',res.data.cartTotal)
            }
          })
          console.log(val)
        },
        get() {
          if (this.cartTotal.goodsCount ==this.cartTotal.checkedGoodsCount) {
            return true;
          } else {
            return false;
          }
        }
      },
      ...mapStateObj
    },

    watch: {
        cartList(currVal) {
            // 监听mapState中的变量，当数据变化（有值、值改变等），
            // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量
          // 获取多选的ID
          this.list = currVal.map(item => item.product_id).toString()
          console.log(this.list)
        }
        },
    created() {
      this.$store.dispatch('AjaxCart')
    },
    methods: {
      onSubmit() {

      },
      checkEvent(val, item) {
        GetEventList({
          isChecked:Number(val),
          productIds:item.product_id
        }).then(res => {
          if(res.errno ==0){
            /* console.log(res) */

          }
        })
/*        console.log(val)
        console.log(item)
 */
      },
      deletedData(item){
          GetDeleteList({
            productIds:item.product_id
          }).then(res=> {
            console.log(res)
            this.$store.commit('setCartList',res.data.cartList)
            this.$store.commit('setCartTotal',res.data.cartTotal)
          })
          console.log(item)
      }
    }
  }
</script>

<style lang="less" scoped>
  .BuyCart {
    .info {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      color: #999;
      height: 24px;
      line-height: 24px;
      background: #efefef;
    }

    .list {
      padding-bottom: 50px;
      .cartItem {
        display: flex;
        align-items: center;
        padding: 10px 5px;

        .van-checkbox {
          padding: 5px;
        }

        .van-image {
          background: #efefef;
        }

        .title {
          font-size: 14px;
          width: 100%;
          display: flex;
          justify-content: space-between;
        }

        .brief {
          color: #999;
          font-size: 12px;

        }

        .price {
          color: red;
        }

        .product {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-start;
          height: 70px;
          padding: 0 10px;
          position: relative;

        }
        .van-button{
          position: absolute;
          right: 10px;
          top: 50px;
          height: 20px;
        }
      }


    }
  }
</style>
